<template>
    <view class="overall">
        <view class="content">
            <!-- 原生实现通知栏 -->
            <view class="notice-bar">
                <view class="notice-icon">
                    <wd-icon name="warn-bold" size="28rpx" color="#FF6010"></wd-icon>
                </view>
                <view class="notice-text">！ 仅支持查询一年内的门诊检验检查报告</view>
            </view>
            
            <view class="switch">
                <view>
                    <view>{{userInfo.nickname}}</view>
                    <view>就诊人ID：{{userInfo.id}}</view>
                </view>
                <view>
                    <view @click="exchanging">切换就诊人</view>
                </view>
            </view>
            
            <!-- 原生实现：暂无内容提示 -->
            <view class="empty-tip" v-if="logItem.length === 0">
                <view class="empty-image">
                    <image src="/static/images/empty_content.png" mode="aspectFit" />
                </view>
                <view class="empty-text">暂无内容</view>
            </view>

            <view class="manifest" v-for="(item ,index) in logItem" :key="index" @click="handleClick(item.img)">
                <view>
                    <view>{{item.name}}</view>
                    <view>{{item.create_time}}</view>
                </view>
                <view>
                    <wd-icon name="arrow-right" size="22px"></wd-icon>
                </view>
            </view>
        </view>

        <!-- 原生实现：切换就诊人弹窗 -->
        <view class="modal-mask" v-if="show" @click="handleClose"></view>
        <view class="modal-container" v-if="show">
            <view class="person">
                <view class="personTitle">
                    <view>切换就诊人</view>
                </view>
                <view class="personItem" v-for="(item, index) in cardInfo" :key="index" @click="substitution(item)">
                    <view>{{item.nickname}}</view>
                    <view>就诊ID号：{{item.id}}</view>
                </view>
                <view class="personBut">
                    <view @click="manage(1)">添加就诊人</view>
                    <view @click="manage(2)">管理就诊人</view>
                </view>
            </view>
        </view>

        <!-- 原生实现：图片查看弹窗 -->
        <view class="image-modal-mask" v-if="value" @click="handleClose"></view>
        <view class="image-modal-container" v-if="value">
            <view class="images">
                <image :src="'https://yiliao.kuxia.top/'+img" mode=""></image>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { card, payLogs, lists, Inspect } from '@/api/index.js';

function handleClickLeft() {
    uni.navigateBack();
}

const userInfo = ref({});
const cardInfo = ref([]);
const logItem = ref([]);
const number = ref(0);

// 获取user_id的方法
const getUserId = async () => {
    try {
        const res = await uni.getStorage({ key: 'user' });
        return res.data?.data?.id;
    } catch (error) {
        console.error('获取用户ID失败:', error);
        uni.showToast({
            title: '获取用户信息失败，请重新登录',
            icon: 'none',
            duration: 3000
        });
        return null;
    }
};

// 获取就诊人列表
const fetchCardList = async (userId: string | null) => {
    if (!userId) return;
    
    try {
        const res = await card({ user_id: userId });
        cardInfo.value = res.data || [];
        
        // 设置默认就诊人
        const defaultCard = cardInfo.value.find(item => item.status === 1);
        if (defaultCard) {
            userInfo.value = defaultCard;
        } else if (cardInfo.value.length > 0) {
            userInfo.value = cardInfo.value[0];
        }
        
        return res.data;
    } catch (error) {
        console.error('获取就诊人列表失败:', error);
        return [];
    }
};

// 获取检查记录
const fetchInspectLogs = async (cardId: string | null, userId: string | null) => {
    if (!cardId || !userId) return;
    
    try {
        const response = await Inspect({
            card: cardId,
            user_id: userId
        });
        console.log('检查记录:', response.data);
        logItem.value = response.data || [];
        return response.data;
    } catch (error) {
        console.error('获取检查记录失败:', error);
        return [];
    }
};

// 初始化数据
const initData = async () => {
    const userId = await getUserId();
    await fetchCardList(userId);
    
    // 如果有就诊人信息，获取第一条就诊人的检查记录
    if (cardInfo.value.length > 0) {
        await fetchInspectLogs(cardInfo.value[0].card, userId);
    }
};

// 页面加载时初始化
onMounted(() => {
    initData();
});

const show = ref<boolean>(false);
const money = ref<boolean>(false);
const visible = ref<boolean>(false);

function exchanging() {
    initData();
    show.value = true;
}

function handleClose() {
    show.value = false;
    money.value = false;
    value.value = false;
}

function substitution(item) {
    userInfo.value = item;
    fetchInspectLogs(item.card, item.user_id);
    handleClose();
}

const value = ref<boolean>(false);
const img = ref<string>('');

// function handleClick(imgs) {
//     console.log(imgs);
//     value.value = true;
//     img.value = imgs;
// }

function manage(index) {
    show.value = false;
    if (index == 1) {
        uni.navigateTo({
            url: '/pages/addition/addition',
        });
    } else if (index == 2) {
        uni.navigateTo({
            url: '/pages/patient/patient',
        });
    }
}
</script>

<style scoped>
/* 原有样式保持不变 */
.overall {
    width: 100%;
    background-color: #F4F4F4;
    min-height: 100vh;
}

.title {
    width: 100%;
    height: 180rpx;
    background-color: #00DACA;
    color: white;
    display: flex;
    align-items: center;
}

.name {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 42rpx;
    margin-top: 50rpx;
    margin-left: 3%;
}

.name>view {
    margin-left: 20rpx;
}

.content {
    width: 100%;
}

.switch {
    width: 94%;
    height: 160rpx;
    padding: 0 3%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    margin-top: -10px;
}

.switch>view:first-child>view {
    padding-bottom: 18rpx;
}

.switch>view:first-child>view:first-child {
    font-weight: bold;
    font-size: 32rpx;
}

.switch>view:last-child>view {
    color: #40C5D3;
    border: 3rpx #40C5D3 solid;
    padding: 12rpx 20rpx;
    border-radius: 2000rpx;
    font-size: 30rpx;
}

.manifest {
    width: 90%;
    background-color: white;
    padding: 40rpx 5%;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.manifest>view:first-child>view:first-child {
    font-weight: bold;
    font-size: 32rpx;
    margin-bottom: 20rpx;
}

.person {
    width: 100vw;
    padding-bottom: 2vh;
}

.personTitle {
    width: 100%;
    height: 100rpx;
    background-color: #00DACA;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 36rpx;
}

.personItem {
    width: 96%;
    padding: 30rpx 0%;
    margin: 0 2%;
    height: 100rpx;
    border-bottom: #C7C7C7 1rpx solid;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.personBut {
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.personBut>view {
    width: 50%;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    color: #00A8BB;
    border-bottom: #C7C7C7 1rpx solid;
}

.images {
    width: 600rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 0;
}

.images>image {
    width: 96%;
    object-fit: cover;
    display: block;
}

/* 新增：原生通知栏样式 */
.notice-bar {
    width: 94%;
    height: 80rpx;
    padding: 0 3%;
    background-color: #FFF7E8;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
}

.notice-icon {
    margin-right: 15rpx;
}

.notice-text {
    font-size: 28rpx;
    color: #FF6010;
}

/* 新增：原生弹窗样式 */
.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-container {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

/* 新增：图片弹窗样式 */
.image-modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-modal-container {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 新增：原生暂无内容提示样式 */
.empty-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60rpx 0;
}

.empty-image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 20rpx;
}

.empty-image image {
    width: 100%;
    height: 100%;
}

.empty-text {
    font-size: 30rpx;
    color: #999;
}
</style>